@import './variables';

* {
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 10px;
}

body {
    margin: 0;
}

button{
    background: none;
    border: 1px solid #aaa;
}
a {
    color: #999999;
    text-decoration:none
}
.m-c-p {
    cursor: pointer;
}

.w-100{
    width: 100vw;
}
.h-100{
    height: 100vh;
}
.text-ellipsis{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b-radius{
    border: 1px solid grey;
    border-radius: 0.5rem;
}

@each $colorKey,
$color in $colors {
    .text-#{$colorKey} {
        color: $color
    }

    .bg-#{$colorKey} {
        background: $color;
    }
}

@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var
    }
}



@each $size,
$rem in $sizes {
    .fs-#{$size} {
        font-size: $rem
    }
}

.d-flex {
    display: flex;
}



@each $key,
$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}

@each $key,
$value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}
.flex-content-between{
    align-content: space-between;
}

.flex-grow-1 {
    flex-grow: 1;
}


@each $typeKey, $type in $space-type {
    @each $sizeType, $size in $space-size {
        .#{$typeKey}-#{$sizeType}{
            #{$type}: $size
        }
    }
    @each $sizeType, $size in $space-size {
        .#{$typeKey}x-#{$sizeType}{
            #{$type}-left : $size;
            #{$type}-right : $size;
        }
        .#{$typeKey}y-#{$sizeType}{
            #{$type}-top : $size;
            #{$type}-bottom : $size;
        }
    }
    @each $directionType, $direction in $space-direction {
        @each $sizeType, $size in $space-size {
            .#{$typeKey}#{$directionType}-#{$sizeType}{
                #{$type}-#{$direction} : $size
            }
        }
    }
}

// 富文本框内的样式
.ql-syntax{
    background: #222;
    color: #ccc;
    padding: 3rem;
    border-radius: 0.5rem;
}

.el-scrollbar__wrap{ 
    overflow: scroll; 
    width: 110%; 
    height: 120%;
}

